import React, { memo, useContext, useState, useEffect } from 'react';
import { message } from 'antd';

import { isSuccess } from '@/utils/request';
import { withRoutePage } from '@/utils/enhanceUtils';

import { hrOverviewRecheck } from '@/services/salaryManage/salaryCalculate';

import StepList from '@/pages/SalaryManage/components/StepList';
import SalaryPageWrapper from '@/pages/SalaryManage/components/SalaryPageWrapper';
import SalaryPageProvider from '@/pages/SalaryManage/components/SalaryPageWrapper/SalaryPageProvider';
import SalaryOverviewWrapper from '@/pages/SalaryManage/components/SalaryOverviewWrapper/index';

import salaryStyle from '@/pages/SalaryManage/salaryManage.less';

const { queryTableBodyData, getCheckButtons } = hrOverviewRecheck;

const rowKey = 'deptCode';

const CollectPage = memo(({ actionType }) => {
    const salaryProvider = useContext(SalaryPageProvider);
    const { period, organizationCode, searchModel, updateSignal } = salaryProvider;
    const [tableLoading, setTableLoading] = useState(false);
    const [stepLoading, setStepLoading] = useState(false);
    // const [historySource, setHistorySource] = useState([]);
    const [checkButtonList, setCheckButtonList] = useState([]);
    const [pageData, setPageData] = useState({
        dataSource: [],
        footerSource: []
    });

    // step是否要更新
    useEffect(() => {
        let timeOut;
        if (period && organizationCode) {
            setStepLoading(true);
            timeOut = setTimeout(() => {
                setStepLoading(false);
            }, 10);
        }

        return () => {
            clearTimeout(timeOut);
        };
    }, [updateSignal, period, organizationCode]);

    // 获取可操作按钮数组
    useEffect(() => {
        const getButtonFn = async () => {
            const year = period.substr(0, 4);
            const month = period.substr(5);
            const buttonRes = await getCheckButtons({
                year,
                month,
                actionType,
                organizationCode
            });

            if (isSuccess(buttonRes)) {
                setCheckButtonList((buttonRes.data && buttonRes.data.tableToolButtonList) || []);
            } else {
                setCheckButtonList([]);
            }
        };
        if (period && organizationCode) {
            getButtonFn();
        }
    }, [period, organizationCode, updateSignal, actionType]);

    // 获取数据
    useEffect(() => {
        // 获取数据
        const getList = async () => {
            const year = period.substr(0, 4);
            const month = period.substr(5);
            setTableLoading(true);
            const tableRes = await queryTableBodyData({
                organizationCode,
                year,
                month,
                ...searchModel
            });
            setTableLoading(false);
            if (!isSuccess(tableRes)) {
                message.error(tableRes.msg);
                return;
            }
            const { overviewList = [], overviewTotal = {} } = tableRes.data;
            setPageData({
                dataSource: overviewList,
                footerSource: [overviewTotal]
            });
        };
        if (period && organizationCode) {
            getList();
        }

        return () => {
            setPageData({
                dataSource: [],
                footerSource: []
            });
        };
    }, [period, organizationCode, searchModel]);

    return (
        <div className={salaryStyle.salaryWrapper}>
            <StepList period={period} loading={stepLoading} organizationCode={organizationCode} />
            <SalaryOverviewWrapper
                dataSource={pageData.dataSource}
                footerSource={pageData.footerSource}
                tableLoading={tableLoading}
                checkButtonList={checkButtonList}
                organizationCode={organizationCode}
                actionType={actionType}
                rowKey={rowKey}
            />
        </div>
    );
});

const FinancialCollect = memo(({ location }) => (
    <SalaryPageWrapper
        type="salaryRecheck"
        location={location}
        tabNameMap={[
            {
                name: 'hrRecheck',
                title: 'HR总览',
                tabType: '1'
            },
            {
                name: 'financialRecheck',
                title: '财务总览',
                tabType: '2'
            }
        ]}
        tabProps={{
            type: 'overview',
            overviewUrl: '/finance/salary/calculate/recheck/financialrecheck',
            detailUrl: '/finance/salary/calculate/recheck/financialrecheck/detail',
            logUrl: '/finance/salary/calculate/recheck/recheckLog'
        }}
    >
        <CollectPage actionType={2} />
    </SalaryPageWrapper>
));

export default withRoutePage(FinancialCollect);
